<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WPF app</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWpfApp.styles.css" rel="stylesheet" />
    <script>
        const addedComponents = [];
        let numAddedComponents = 0;

        var i = 1;
        async function addDynamicComponent() {
            let containerElement = document.createElement('div');
            containerElement.id = `root-container-${++numAddedComponents}`;
            document.body.appendChild(containerElement);
            const component = await Blazor.rootComponents.add(containerElement, 'my-dynamic-root-component', { incrementAmount: i });
            addedComponents.push({ component, containerElement });

            i++;
        }

        function removeRootComponent() {
            // Treat it like a FIFO queue
            const { component, containerElement } = addedComponents.shift();
            component.dispose();
        }
    </script>
</head>

<body>
    <div id="app"></div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <button onclick="addDynamicComponent()">Add dynamic component</button>
    <button onclick="removeRootComponent()">Remove root component</button>

    <script src="_framework/blazor.webview.js"></script>
</body>

</html>
